<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .no-select {
            pointer-events: none;
        }
        td {
            width: 25px;
            text-align: center;
        }
        tr {
            height: 25px;
        }
    </style>
    <script lang="java-script" src="cell.js"></script>
    <script lang="java-script" src="map.js"></script>
    <script lang="java-script" src="robot.js"></script>
    <script lang="java-script">
        var path = null;
        var COST_OF_MOVEMENT = null;
        var FUEL_SPAWN_RATE = null;
        var ROBOT_SIZE = null;
        var border = null;
        var noFuelFlag = false;
        var robot = null;
        var map = null;

        function drawPath(path) {
            if (path == null) return;

            for (let i = 0; i < path.length; i++) {
                if (path[i].isEnd || path[i].isEnd) {
                    continue;
                }
                var currentCell = document.getElementById("cell_" + path[i].i + "_" + path[i].j);
                currentCell.bgColor = "#ffff00";       
            }
        }

        function drawRobot(robotCurrentPos, border) {

            var i = robotCurrentPos.i;
            var j = robotCurrentPos.j;        

            var ii = i - border < 0 ? 0 : i - border;
            var jj = j - border < 0 ? 0 : j - border;
            var iii = i + border + 1 > map.cells.length ? map.cells.length : i + border + 1;
            var jjj = j + border + 1 > map.cells[0].length ? map.cells[0].length : j + border + 1;
            
            for (var i = ii; i < iii; i++) {
                for (var j = jj; j < jjj; j++) {
                    var currentCell = document.getElementById("cell_" + i + "_" + j);
                    currentCell.bgColor = "#0000ff";
                }
            }
            
        }

        // func for painting cell in grey based on isWall param
        function setWall(c, event) {
            
            if (isPressed) {
                var cc = document.getElementById(c.id)
                var i = parseInt(cc.getAttribute("i"));
                var j = parseInt(cc.getAttribute("j"));
                if (i > 0 && j > 0 && i < map.cells.length - 1 && j < map.cells[0].length - 1) {
                    if (!map.cells[i][j].isStart && !map.cells[i][j].isEnd) {
                        map.cells[i][j].isWall = !map.cells[i][j].isWall;
                        cc.isWall = map.cells[i][j].isWall;
                        cc.bgColor = map.cells[i][j].isWall ? "#993300" : "#dddddd";   
                    }                                   
                } 
                event = null;               
            }
        }

        // func which draws map
        function drawMap(cells, map_place_name) {
            
            var map_place = document.getElementById(map_place_name);
            
            var buffer = "<table border = 1>";
            for (var i = 0; i < cells.length; i++) {
                buffer += "<tr>";
                for (var j = 0; j < cells[0].length; j++) {
                    var c = cells[i][j];

                    /**
                     * cell: main - #dddddd; light - #ffffff
                     * wall: main - #993300; light - #cc3300
                     * path: main - #ffff00; light - #ffff66
                     * start: main - #66ff33; light - #99ff99
                     * end: main - #0000ff; light - #0066ff
                     */
                    var bgColor = c.isVisible ? "#ffffff" : "#dddddd";
                    if (c.isWall) {
                        bgColor = c.isVisible ? "#cc3300" : "#993300";
                    }
                    if (c.isPath) {
                        bgColor = c.isVisible ? "#ffff66" : "#ffff00";
                    }
                    if (c.isStart) {
                        bgColor = c.isVisible ? "#99ff99" : "#66ff33";
                    }
                    if (c.isEnd) {
                        bgColor = c.isVisible ? "#0066ff" : "#0000ff";
                    }
                    //buffer += "<td bgColor=\"" + bgColor + "\" id=\"cell_" + c.i + "_" + c.j + "\" i=\"" + c.i +"\" j=\"" + c.j +"\" fuel=\"" + c.f +"\" isWall=\"" + c.isWall + "\" onmouseover=\"setWall(this, event)\">" + c.i + "," + c.j +"</td>";
                    buffer += "<td bgColor=\"" + bgColor + "\" id=\"cell_" + c.i + "_" + c.j + "\" i=\"" + c.i +"\" j=\"" + c.j +"\" fuel=\"" + c.f +"\" isWall=\"" + c.isWall + "\" onmouseover=\"setWall(this, event)\">" + c.fuel +"</td>";
                    
                }
                buffer += "</tr>";
            }
            buffer += "</table>";
            
            map_place.innerHTML = buffer;
        } 

        // func checking if scroll was pressed
        var isPressed = false;
        function f1(event) {

            if (event.button == "1") {
                isPressed = true;    
            }
        }

        // func setting event to false
        function f2(event) {
            isPressed = false;
        }

        function report(buffer) {
            var report = document.getElementById("report");
            report.innerHTML = buffer + report.innerHTML;
        }

        function clear_report() {
            var report = document.getElementById("report");
            report.innerHTML = "";
        }

        function reload_prog() {
            window.location.reload();
        }

        function current_robot_stats(buffer) {
            var stats = document.getElementById("stats");
            stats.innerHTML = "";
            stats.innerHTML += buffer;
        }

        function get_size() {
            var size = document.getElementById("size");
            ROBOT_SIZE = parseInt(size.value);
        }

        function on_load() {
            get_size();
            FUEL_SPAWN_RATE = 100;
            FUEL_SPAWN_RATE = FUEL_SPAWN_RATE - parseInt(document.getElementById("f").value);
            COST_OF_MOVEMENT = parseInt(document.getElementById("c").value);
            var x = parseInt(document.getElementById("x").value) + 2;
            var y = parseInt(document.getElementById("y").value) + 2;
            
            map = new Map(x, y, FUEL_SPAWN_RATE, COST_OF_MOVEMENT);

            map.initMap();
            map.setStart(2, 2);
            map.setEnd(16, 26);
            drawMap(map.cells, 'map_place');
        }

        // entry func for start moving robot
        function search(timeout) {
            var final = false;

            console.log("cells");
            console.log(map.cells);

            if (robot == null) {
                border = (ROBOT_SIZE == 1) ? 0 : ((ROBOT_SIZE == 3) ? 1 : ((ROBOT_SIZE == 5) ? 2 : ((ROBOT_SIZE == 7) ? 3 : 0)));
                robot = new Robot(map.start, 100, ROBOT_SIZE, border + 1);
            }
            // view robot stats
            current_robot_stats("Robot stats: posX " + robot.current.j + "; posY " + robot.current.i + "; fuel " + robot.fuel + ";")

            console.log("current robot cell")
            console.log(robot.current);
            
            drawPath(path);
            drawRobot(robot.current, border);            
            if (noFuelFlag) {
                final = true;
                report("Cant move! No fuel!<br>")
            } else {
                // robot looks around
                robot.openMap(map.cells);
                // refreshing graph
                map.refreshGraph(robot.size);
                // display refreshed map...
                drawMap(map.cells, 'map_place');
                if (robot.current == map.end) {
                    report("We already on the target!<br>")
                    final = true;
                    drawPath(path);
                    drawRobot(robot.current, border);                  
                } else {
                    // searching path
                    path = robot.aStar(robot.current, map.end, robot);
                    var cr = robot.current;
                    if (path.length == 0) { 
                        report("Target is unrecheable!<br>")
                        final = true;
                   } else {
                        console.log("path");
                        console.log(path);
                        // moving robot
                        var status = robot.move(path[1]);
                        if (!status) {                            
                            noFuelFlag = true;
                        } else {
                            map.refreshGraph(robot.size);
                        }
                    }
                    // display map
                    drawMap(map.cells, 'map_place');                    
                    drawPath(path);
                    // display robot position
                    drawRobot(cr, border);                    
                   
                }
            } 
            console.log("cells");
            console.log(map.cells);
            
            if (!final) {
                if (timeout > 0) {
                    setTimeout(search, timeout, timeout);
                }
            }            
        }
    </script>
</head>
<body onload="on_load()" onmousedown="f1(event)" onmouseup="f2(event)">

    X&nbsp;<input id="y" type="text" value="30" placeholder="y" onchange="on_load()" />
    Y&nbsp;<input id="x" type="text" value="20" placeholder="x" onchange="on_load()" />
    fuel spawn rate&nbsp;<input id="f" type="text" value="70" placeholder="fuel" onchange="on_load()" />
    cost of movement&nbsp;<input id="c" type="text" value="5" placeholder="cost" onchange="on_load()" />
    size of robot&nbsp;<select id="size" onchange="get_size()">
        <option value="1" selected>1</option>
        <option value="3">3</option>
        <option value="5">5</option>
        <option value="7">7</option>
    </select>
    <input id="go" type="button" value="go" onclick="search(0)" />
    <input id="run" type="button" value="run" onclick="search(500)" />
    <input id="reload_prog" type="button" value="reload" onclick="reload_prog()" />
    <div id="stats">Robot stats:</div>
    <br>
    <table border="0" width="100%">
        <tr>
            <td width="70%">
                <object id="map_place"></object>
            </td>
            <td width="30%" align="left" valign="top">
                events: <input id="clear" type="button" value="clear" onclick="clear_report()" />
                <div id="report" style="overflow: scroll; width: 500px; height: 500px;"></div>
            </td>
        </tr>
    </table>
</body>
</html>